<template>
  <n-card class="info-card">
    <n-avatar
      round
      :size="120"
      :src="info.avatar"
      style="position: relative; top: -50px; cursor: pointer"
      @click="visitProfile"
    />
    <div style="margin-top: -50px; padding: 0 20px; font-size: 1.2rem">
      {{ info.name }}
    </div>
    <n-space justify="space-around" style="margin-top: 10px; padding: 0 20px">
      <div class="digit-text">
        <span class="grey-text">阅读量</span><br />
        {{ info.readerCount }}
      </div>
      <div class="digit-text">
        <span class="grey-text">粉丝</span><br />
        {{ info.followerCount }}
      </div>
      <div class="digit-text">
        <span class="grey-text">影响力</span><br />
        {{ info.effect }}
      </div>
    </n-space>
    <n-space
      justify="space-around"
      style="padding: 15px 20px"
      v-if="!info.isSelf"
    >
      <n-button
        @click="follow"
        :loading="followLoading"
        :secondary="info.isFollowing ? true : false"
      >
        {{ info.isFollowing ? '已关注' : '关注' }}
      </n-button>
      <n-button @click="sndMsg">发私信</n-button>
    </n-space>
  </n-card>
</template>

<script setup>
import api from '@/api/api'
const { User } = api
const props = defineProps({
  id: String
})
onMounted(() => {
  // TODO
  // User.getInfo({
  //   id: props.id,
  // }).then((res) => {
  //   if (res.success) {
  //     info.value = res.data;
  //   }
  // });
})
const info = ref({
  // 阅读量
  readerCount: '-',
  // 粉丝
  followerCount: '-',
  // 影响力
  effect: '-',
  avatar: '',
  name: 'Loading...',
  currentActivity: '',
  isSelf: false,
  isFollowing: false
})
const router = useRouter()
const message = useMessage()
const sndMsg = () => {
  window.open('/message/chat/' + props.id)
}
const followLoading = ref(false)
const follow = () => {
  followLoading.value = true
  User.changeFollow({
    id: props.id,
    isFollowing: !info.value.isFollowing
  }).then((res) => {
    followLoading.value = false

    if (res.success) {
      info.value.isFollowing = !info.value.isFollowing
    } else message.error(res.msg)
  })
}
const getInfo = () => {
  User.getStatistic({
    id: props.id
  }).then((res) => {
    if (res.success) {
      info.value = { ...info.value, ...res.data }
    }
  })
  User.getProfile({
    id: props.id
  }).then((res) => {
    if (res.success) {
      info.value = { ...info.value, ...res.data }
    }
  })
}

const visitProfile = () => {
  window.open('/profile/' + props.id)
}

onMounted(() => {
  getInfo()
})
</script>

<style scoped lang="scss">
.info-card {
  text-align: center;
  margin-top: 50px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  .digit-text {
    font-size: 1.2em;
  }
  .grey-text {
    color: #999;
    font-size: 0.8em;
  }
  button {
    width: 20vw;
  }
}
</style>
